﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery给表格加滚动条 - 非凡图库</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
</head>
<body>
<div class="headeline"></div>
<!--演示内容开始-->
<p><style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.demo{width:500px;margin:40px auto 0 auto;}
/* tablescroll */
.tablescroll{font:12px normal Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;background-color:#fff;}
.tablescroll td,.tablescroll_wrapper,.tablescroll_head,.tablescroll_foot{border:1px solid #ccc;}
.tablescroll td{padding:5px;}
.tablescroll_wrapper{border-left:0;}
.tablescroll_head{font-size:12px;font-weight:bold;background-color:#eee;border-left:0;border-top:0;margin-bottom:3px;}
.tablescroll thead td{border-right:0;border-bottom:0;}
.tablescroll tbody td{border-right:0;border-bottom:0;}
.tablescroll tbody tr.first td{border-top:0;}
.tablescroll_foot{font-weight:bold;background-color:#eee;border-left:0;border-top:0;margin-top:3px;}
.tablescroll tfoot td{border-right:0;border-bottom:0;}
</style></p>
<div class="demo">
<table cellspacing="0" cellpadding="0" id="thetable">
    <thead>
        <tr>
            <td>城市</td>
            <td>状态代码</td>
            <td>zip</td>
            <td>纬度</td>
            <td>经度</td>
            <td>县</td>
        </tr>
    </thead>
    <tbody>
        <tr class="first">
            <td>中国</td>
            <td>NY</td>
            <td>00501</td>
            <td>40.8152</td>
            <td>-73.0455</td>
            <td>Suffolk</td>
        </tr>
        <tr>
            <td>中国</td>
            <td>NY</td>
            <td>00544</td>
            <td>40.8152</td>
            <td>-73.0455</td>
            <td>Suffolk</td>
        </tr>
        <tr>
            <td>韩国</td>
            <td>PR</td>
            <td>00601</td>
            <td>18.1788</td>
            <td>-66.7516</td>
            <td>韩国</td>
        </tr>
        <tr>
            <td>Aguada</td>
            <td>PR</td>
            <td>00602</td>
            <td>18.381389</td>
            <td>-67.188611</td>
            <td>Aguada</td>
        </tr>
        <tr>
            <td>Aguadilla</td>
            <td>PR</td>
            <td>00603</td>
            <td>18.4554</td>
            <td>-67.1308</td>
            <td>Aguadilla</td>
        </tr>
        <tr>
            <td>Aguadilla</td>
            <td>PR</td>
            <td>00604</td>
            <td>18.4812</td>
            <td>-67.1467</td>
            <td>Aguadilla</td>
        </tr>
        <tr>
            <td>Aguadilla</td>
            <td>PR</td>
            <td>00605</td>
            <td>18.429444</td>
            <td>-67.154444</td>
            <td>Aguadilla</td>
        </tr>
        <tr>
            <td>Maricao</td>
            <td>PR</td>
            <td>00606</td>
            <td>18.182778</td>
            <td>-66.980278</td>
            <td>Maricao</td>
        </tr>
        <tr>
            <td>Anasco</td>
            <td>PR</td>
            <td>00610</td>
            <td>18.284722</td>
            <td>-67.14</td>
            <td>Anasco</td>
        </tr>
        <tr>
            <td>Angeles</td>
            <td>PR</td>
            <td>00611</td>
            <td>18.286944</td>
            <td>-66.799722</td>
            <td>Utuado</td>
        </tr>
        <tr>
            <td>Arecibo</td>
            <td>PR</td>
            <td>00612</td>
            <td>18.4389</td>
            <td>-66.6924</td>
            <td>Arecibo</td>
        </tr>
        <tr>
            <td>Arecibo</td>
            <td>PR</td>
            <td>00613</td>
            <td>18.1399</td>
            <td>-66.6344</td>
            <td>Arecibo</td>
        </tr>
        <tr>
            <td>Arecibo</td>
            <td>PR</td>
            <td>00614</td>
            <td>18.1399</td>
            <td>-66.6344</td>
            <td>Arecibo</td>
        </tr>
        <tr>
            <td>Bajadero</td>
            <td>PR</td>
            <td>00616</td>
            <td>18.428611</td>
            <td>-66.683611</td>
            <td>Arecibo</td>
        </tr>
        <tr>
            <td>Barceloneta</td>
            <td>PR</td>
            <td>00617</td>
            <td>18.4525</td>
            <td>-66.538889</td>
            <td>Barceloneta</td>
        </tr>
    </tbody>
    <tfoot>
    <tr>
        <td>10</td>
        <td>2</td>
        <td>15</td>
        <td align="center">-</td>
        <td align="center">-</td>
        <td>9</td>
    </tr>
    </tfoot>
</table>
</div>
<script type="text/javascript" src="js/jquery.tablescroll.js"></script> <script type="text/javascript">
$(document).ready(function($){
	$('#thetable').tableScroll({
		width:480,
		height:150
	});
});
</script>
<!--演示内容结束-->
<div style="text-align:center;clear:both"><br>
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.ffpic.com/" target="_blank">非凡图库</a></p>
</div>
<div style="display:none"><script src="http://s24.cnzz.com/stat.php?id=4273731&web_id=4273731" language="JavaScript"></script><script src="http://s20.cnzz.com/stat.php?id=5240441&web_id=5240441" language="JavaScript"></script></div></body>
</html>